<template>
  <template v-for="(item, index) in arr" :key="index">
    <el-sub-menu :index="item.path" v-if="item.children?.length">
      <template #title>
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <el-menu-item v-for="(i, t) in item.children" :key="t" :index="i.path">
        <el-icon>
            <component :is="i.meta.icon"></component>
        </el-icon>
        <!-- <template #title>Navigator Two</template> -->
        <span>{{ i.meta.title }}</span>
      </el-menu-item>
    </el-sub-menu>

    <el-menu-item v-else :index="item.path">
       <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
      <!-- <template #title>Navigator Three</template> -->
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
const route = useRoute();
// console.log(route, "snkc sdbn");

const arr = ref([]);

onMounted(() => {
  arr.value = route.matched[0].children;
});
</script>